<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <style>
        /*头部*/
        ul{
            list-style: none;/*出去小圆点*/
            text-align: right;/*靠右*/
        }
        li{
            display: inline;/*改为内联性*/
        }
        a{
            text-decoration: none;/*去下划线*/
            color: black;
            padding: 10px 20px;
        }
        a:hover{/*鼠标放上去变化*/
            background-color: #666;
            color: yellow;
        }

        /*中间*/
       .content{
        text-align:center;
       }
        /*搜索框*/
        #kn{
            width: 654px;
            height: 44px;
            background-color: #fff;
            margin: 0 auto;
        }
        #z1{
            height: 44px;
            width: 546px;
            float: left;
            background-color: #fff;
        }
        #z1 input{
            width: 443px;
            height: 16px;
            border: 2px solid #ccc;
            padding:12px 87px 12px 16px ;/*内边距上右下左*/
            background-color: #f0f8ff;/*背景颜色*/
            font-size: 16px;
            float: left;
        }
        /* 文本框  添加伪类, 鼠标悬停变化 */
        #z1 input:hover{
            border-color: #666;
            border-right-color: #4e6ef2;
        }
        /*百度一下按钮*/
        #z2 input{            
            font-size: 17px;
            width: 108px;
            height: 44px;
            background: #35f;/*背景色*/
            border: 0;/*边框*/
            color: #fff;/*内部字的颜色*/
            border-radius: 0 10px 10px 0;/*按钮边框圆滑*/
            float: left;
        }
        /* 搜索input按钮 添加伪类, 鼠标悬停变化 */
        #z2 input:hover{
            background-color: #4662d9;
        }
          

        /*底部*/
        div{
            text-align: center;
            color:#ccc;   /*rjb颜色*/
            font-size: 12px;
        }
        span{
            margin:20px;
        }
    </style>
</head>
<body>
    <!-- 划分三个区块 -->
    <div id="head">
        <ul>
            <li><a href="http://news.baidu.com" target="_blank">新闻</a></li>
            <li><a href="http://map.baidu.com" target="_blank">地图</a></li>
            <li><a href="https://live.baidu.com/" target="_blank">直播</a></li>
            <li><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a></li>
            <li><a href="http://tieba.baidu.com" target="_blank">贴吧</a></li>
            <li><a href="http://xueshu.baidu.com" target="_blank">学术</a></li>
            <li><a href="./kunkun.html" target="_blank">坤坤</a></li>
        </ul>
    </div>


    <div id="body">
        <img  src="./logo.png" alt="" height="150px" >
        <form action="">
                <div id="kn">
                        <div id="z1">
                            <input  type="text">
                        </div>
                        <div id="z2">
                            <input  type="button" value="百度一下">
                        </div>
                </div>
        </form>
        <img  src="./2v.png" alt="" height="600px" >
    </div>


    <div id="footer">
        <div>
            <span>关于百度About Baidu</span>
            <span>使用百度前必读</span>
            <span>帮助中心</span>
            <span>企业推广</span>
        </div>
        <div>
            <span>京公网安备11000002000001号</span>
            <span>京ICP证030173号</span>
            <span>信息网络传播视听节目许可证 0110516</span>            
        </div>
        
    </div>
</body>
</html>